<template>
     <div>
        <el-form ref="ruleFormRef" style="width: 100%;" :model="ruleForm" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="类型名称" prop="DictTypeName">
                <el-input v-model="ruleForm.DictTypeName" />
            </el-form-item>
            <el-form-item>
                <div class="login-button">
                <el-button type="primary" @click.prevent="submit(ruleFormRef)">
                    保存
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import dicttypeapi from '@/api/dicttypeapi';
import { ComponentSize, ElNotification, FormInstance, FormRules } from 'element-plus';
import { reactive, ref } from 'vue';

const emit = defineEmits(["Close"])
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref({
    id: 0,
    DictTypeName: '',
    Status: 0,
})
const rules = reactive<FormRules<RuleForm>>({
    DictTypeName: [
        { required: true, message: '请输入类型名称', trigger: 'blur' },
        { min: 2, max: 5, message: '2-5个字符', trigger: 'blur' },
    ],

})
interface RuleForm {
    DictTypeName: string
    Status: number
}

const submit = (formel: FormInstance | undefined) => {
    if (!formel) return;
    formel.validate(val => {
        if (val) {
            dicttypeapi.Add(ruleForm.value).then(res => {
                if (res.code > 0) {
                    ElNotification.success({
                        title: '提示',
                        message: '添加成功',
                        type: 'success',
                        showClose: false,

                    })
                    emit("Close", "add")
                }
                else {
                    ElNotification.success({
                        title: '提示',
                        message: '失败',
                        type: 'error',
                        showClose: false,

                    })
                }
            })

        }

    })
}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped>
.login-button{
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>